<template>
  <scroll-view enable-back-to-top scroll-y class="viewport">
    <view class="custom-nav">
      <button @click="goBack" class="back-btn"><sar-icon name="left" size="32rpx" /></button>
      <text class="title">设备信息</text>
    </view>
    <view class="" v-if="isSHowDeviceInfo">
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/services/shebeishuju_2.png" />
            </view>
          </view>
          <view class="bg-light"> 设备编号:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingResult?.gunId }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/services/shebeishuju_2.png" />
            </view>
          </view>
          <view class="bg-light"> 设备类型:</view>
        </view>
        <view class="item-right">
          <view class="bg-light"> {{ chargingResult?.gunType }}</view>
        </view>
      </view>

      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/services/shebeishuju_2.png" />
            </view>
          </view>
          <view class="bg-light"> 设备状态:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargingResult?.status }}</view>
        </view>
      </view>
      <view class="wd-button" @click="openCharging">
        <wd-button type="primary" class="button-length">开始充电</wd-button>
      </view>
    </view>

    <view class="charging-info" v-if="isCharging">
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/dingdan.png" />
            </view>
          </view>
          <view class="bg-light"> 订单ID:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargeingOrder?.orderId }}</view>
        </view>
      </view>

      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/shebei.png" />
            </view>
          </view>
          <view class="bg-light"> 设备ID:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargeingOrder?.gunId }}</view>
        </view>
      </view>

      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/dingdanzhuangtai.png" />
            </view>
          </view>
          <view class="bg-light"> 订单状态:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">{{ chargeingOrder?.status }}</view>
        </view>
      </view>
      <view gutter="0" class="item-row">
        <view class="item-left">
          <view class="bg-light">
            <view class="img">
              <image src="/static/images/charge/shichang.png" />
            </view>
          </view>
          <view class="bg-light"> 时长:</view>
        </view>
        <view class="item-right">
          <view class="bg-light">60分</view>
        </view>
      </view>

      <view class="wd-button" @click="closeChargingOrder">
        <wd-button type="success" class="button-length">结束订单</wd-button>
      </view>
    </view>
  </scroll-view>
</template>
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { onShow, onHide, onLoad, getSsrGlobalData } from '@dcloudio/uni-app'
import { sanCodeChargingAPI } from '@/services/home'
import { getchargingResultAPI, getClosechargingResultAPI } from '@/services/charge'
import type { SanCodeItem } from '@/types/home'
import type { startChargingResult } from '@/types/charge'
import Icon from 'sard-uniapp/components/icon/icon.vue'
const isCharging = ref(false)
const isSHowDeviceInfo = ref(true)
const gunId = ref('')
// 页面加载
onLoad((options) => {
  if (options && options.gunId) {
    gunId.value = options.gunId as string
    console.log('gunId', options.gunId)
    getDeviceInfoAPI(options.gunId)
  }
})
const chargingResult = ref<SanCodeItem>()
const getDeviceInfoAPI = async (gunId: string) => {
  console.log('getDeviceInfoAPI:', gunId)

  const data = await sanCodeChargingAPI({ gunId: gunId })
  chargingResult.value = data.data
  if (Number(data.code) == 0) {
    // Assign the correct property that matches SanCodeItem
    chargingResult.value = data.data // or data.data.item if that's the structure
  } else {
    uni.showToast({
      title: data.msg || '获取数据失败',
      icon: 'error',
    })
  }
}

const chargeingOrder = ref<startChargingResult>()
const openCharging = () => {
  console.log('gunId', gunId.value)
  if (!gunId.value) {
    uni.showToast({
      title: '设备ID不能为空',
      icon: 'error',
    })
    return
  }
  const res = getchargingResultAPI(gunId.value)
  chargeingOrder.value = res.data
  isCharging.value = true
  isSHowDeviceInfo.value = false
  const startIntervalCharging = setInterval(async () => {
    const res = getchargingResultAPI(gunId.value)
    chargeingOrder.value = res.data
    isCharging.value = true
    isSHowDeviceInfo.value = false
  }, 5000)

  uni.showToast({
    title: '充电已启动',
    icon: 'success',
  })
}
const closeChargingOrder = async () => {
  if (!chargeingOrder.value) {
    uni.showToast({
      title: '当前无充电订单',
      icon: 'error',
    })
    return
  }
  const closeResult = await getClosechargingResultAPI({
    orderId: chargeingOrder.value?.orderId,
    gunId: gunId.value,
  })
  if (Number(closeResult.code) == 0) {
    uni.showToast({
      title: '充电已结束',
      icon: 'success',
    })
    uni.navigateTo({
      url:
        '/pages/batterySwap/order?orderId=' +
        chargeingOrder.value.orderId +
        '&gunId=' +
        gunId.value +
        '&isClose=1',
    })
  }
}
const goBack = () => {
  uni.switchTab({ url: '/pages/category/category' })
}
onUnmounted(() => {
  clearInterval(openCharging)
  //  innerAudioContext.destroy()
})
</script>
<style lang="scss">
@import './index.scss';
</style>
